<template>
  <div>
    <h3>基本表单</h3>
    <div style="background: #e9eef3; padding: 20px">
      <Card :bordered="false">
        <div class="shuru">
          <Input v-model="value13" size="large">
            <Select v-model="select3" slot="prepend" style="width: 160px">
              <Option value="Name">Name</Option>
              <Option value="Time">Time</Option>
              <Option value="Type">Type</Option>
            </Select>
            <Button
              slot="append"
              icon="ios-search"
              @click="selecttrend"
            ></Button>
          </Input>
        </div>
        <el-button
          style="float: right; padding: 3px 0"
          type="text"
          @click="dialogVisible()"
          >添加</el-button
        >
        <el-table :data="this.$store.state.totrendData" style="width: 100%">
          <el-table-column label="Name" width="398">
            <template slot-scope="scope">
              <!-- <i class="el-icon-time"></i> -->
              <span style="margin-left: 10px">{{ scope.row.Name }}</span>
            </template>
          </el-table-column>
          <el-table-column label="Type" width="298">
            <template slot-scope="scope">
              <el-popover trigger="hover" placement="top">
                <p>产品类型: {{ scope.row.Type }}</p>
                <div slot="reference" class="name-wrapper">
                  <el-tag size="medium">{{ scope.row.Type }}</el-tag>
                </div>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column label="Time" width="298">
            <template slot-scope="scope">
              <el-popover trigger="hover" placement="top">
                <p>销售时间: {{ scope.row.Time }}</p>
                <div slot="reference" class="name-wrapper">
                  <el-tag size="medium">{{ scope.row.Time }}</el-tag>
                </div>
              </el-popover>
            </template>
          </el-table-column>
            <el-table-column label="data" width="298">
            <template slot-scope="scope">
              <el-popover trigger="hover" placement="top">
                <p>销售总额: {{ scope.row.data }}</p>
                <div slot="reference" class="name-wrapper">
                  <el-tag size="medium">{{ scope.row.data }}</el-tag>
                </div>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column label="Handle" width="298">
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row), (xianshi = true)"
                >编辑</el-button
              >
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </Card>
      <!-- <el-dialog
        title="添加"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose"
      >
        <el-input
          placeholder="id"
          v-model="newtableData.id"
          clearable
        ></el-input
        ><br />
        <el-input
          placeholder="name"
          v-model="newtableData.name"
          clearable
        ></el-input
        ><br />
        <el-input
          placeholder="Email"
          v-model="newtableData.Email"
          clearable
        ></el-input
        ><br />
        <el-input
          placeholder="Create-Time"
          v-model="newtableData.CreateTime"
          clearable
        ></el-input
        ><br />
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="adduser(), (dialogVisible = false)"
            >确 定</el-button
          >
        </span>
      </el-dialog> -->
      <!-- <el-dialog
        title="修改"
        :visible.sync="xianshi"
        width="30%"
        :before-close="handleClose"
      >
        <el-input
          placeholder="name"
          v-model="newtableData.name"
          clearable
        ></el-input
        ><br />
        <el-input
          placeholder="Email"
          v-model="newtableData.Email"
          clearable
        ></el-input
        ><br />
        <el-input
          placeholder="Create-Time"
          v-model="newtableData.CreateTime"
          clearable
        ></el-input
        ><br />
        <span slot="footer" class="dialog-footers">
          <el-button @click="dialogVisibles = false">取 消</el-button>
          <el-button type="primary" @click="updateuser(), (xianshi = false)"
            >确 定</el-button
          >
        </span>
      </el-dialog> -->
    </div>
  </div>
</template>

<script>
import {gettrend,addtrend,deltrend,updatetrend} from '../../api/trend';
import {getuser} from '../../api/user'
export default {
  name: "BasicForm",
  data(){
    return {
      souuo:{
        Name:"",
      },
      newtableData:{
        id:"",
        Name:"",
        Email:"",
        CreateTime:""
      },
        //  dialogVisible: false,
        //  xianshi:false,
         value13:"",
         select3:"",
         totrendData:[]
    }
  },

  mounted(){
    this.gettrend()
  },
  methods: {
    //获取所有数据
      async gettrend(){
        await this.$store.dispatch ("gettrend")
      },
    //编辑事件
    handleEdit(index) {
      this.$router.push({path:'Revise'+index})
    },

    //删除事件
     handleDelete(index) {
       this.$store.dispatch("deltrend",this.$store.state.totrendData[index].id)
      this.gettrend()
    },

    

    //增加数据
    dialogVisible(){
        this.$router.push({path:'add'})
    },

    //查询
     selecttrend(){
      if(this.select3=="Name"){
        console.log(1)
          let obj = {
             [this.select3]:this.value13
          }
          console.log("obj",obj)
         this.$store.dispatch("selecttrend",obj)
      }else if(this.select3=="Time"){
          let tim ={
            [this.select3]:this.value13
          }
          this.$store.dispatch("selecttrend",tim)
          // })
      }else if(this.select3=="Type"){
        let typ={
          [this.select3]:this.value13
        }
          this.$store.dispatch("selecttrend",typ)
        // })
      }else{
           this.$store.dispatch ("gettrend")
      }
     
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {});
         },
  },
};
</script>

<style scoped>
.shuru{
  width: 800px;
  display: inline-block;
}
</style>